<template>
  <div>
    <van-search
      v-model="params.name"
      placeholder="请输入快检主体名称"
      show-action
      @search="onSearch"
      @clear="clearSearch"
    >
      <img
        slot="action"
        class="filter"
        src="@/assets/img/icon/icon_filter.png"
        alt=""
        @click="onFilter"
      />
    </van-search>

    <div class="page_space">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <card-withBtn
          v-for="(item, index) in list"
          :key="index"
          :data="item.data"
          :title="item.title"
          bottomText="立即采样"
          arrow
          class="mt-15"
          @click="goto('/subject-details?id=' + item.id)"
          @bottomClick="toInspect(item)"
        />
      </van-list>
    </div>

    <div class="btn_wrap">
      <button class="btn" @click="goto('/new-inspectSubject')">
        新增快检主体
      </button>
    </div>

    <van-popup v-model="showFilter" position="bottom">
      <!-- 选择产地-->
      <template v-if="showSubjectType">
        <van-picker
          ref="picker1"
          title="选择主体类型"
          show-toolbar
          :columns="subjectTypeList"
          visible-item-count="3"
        />
        <div class="btn_box">
          <button class="btn large" @click="confirmSubjectType">确定</button>
        </div>
      </template>
      <template v-else>
        <div class="popup_input">
          <div class="popup_input_top">
            <span class="cancel" @click="showFilter = false">取消</span>
            <span class="title">筛选</span>
            <span class="confirm" @click="toFilter">确定</span>
          </div>
          <input-card>
            <inputItem
              v-model="params.subjectTypeName"
              :content="params.subjectTypeName"
              title="主体类型"
              tip="请选择主体类型"
              type="select"
              @select="showSubjectType = true"
            />
            <inputItem
              v-model="params.managementEntName"
              title="所属市场"
              tip="请输入所属市场"
              type="input"
            />
          </input-card>
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script>
import inputCard from '@/components/input-card/card'
import inputItem from '@/components/input-card/item'
import cardWithBtn from '@/components/base-card/with-btn'
import { getInspection } from '@/api/subject'

export default {
  name: 'inspectionSubject',
  components: { cardWithBtn, inputCard, inputItem },
  data() {
    return {
      loading: false,
      finished: false, // 触底加载结束
      params: {
        type: 'fastCheckProduct',
        areaCode: '440000',
        limit: 10,
        page: 1,
        subjectType: '', // 所属类型
        subjectTypeName: '', // 所属类型
        managementEntNameAndShortName: '', // 所属市场
        name: ''
      },
      showFilter: false,
      list: [],
      showSubjectType: false, // 展示主体类型
      subjectTypeList: [
        {
          text: '全部',
          id: ''
        },
        {
          text: '市场内固定档口',
          id: 'FixedPlace'
        },
        {
          text: '市场内临时经营区',
          id: 'TemporaryOperatingArea'
        },
        {
          text: '市场外固定经营者',
          id: 'OtherSellersOfEdibleAgricultural'
        }
      ]
    }
  },
  created() {
    // TemporaryOperatingArea 市场内临时经营者； FixedPlace 市场内固定档口； OtherSellersOfEdibleAgricultural 市场外固定经营者
  },
  methods: {
    // 去除时分秒
    clearSuffix(date) {
      if (!date) return false
      let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)
      return newDate[0]
    },
    clearSearch() {
      this.params.name = ''
      this.getInspectList(this.params, true)
    },
    onSearch() {
      this.getInspectList(this.params, true)
    },
    // 立即采样
    toInspect(e) {
      this.$router.push({
        name: 'immediateSampling',
        query: {
          intercourseEnterpriseInfo: encodeURIComponent(
            JSON.stringify({
              intercourseEnterpriseId: e.id, // 经营主体id
              intercourseEnterpriseName: e.title, // 经营主体
              subjectType: e.subjectType, // 主体类型
              subjectTypeText: e.data[1].value, // 主体类型 中文
              managementEntName: e.data[2].value // 所属市场
            })
          )
        }
      })
    },
    // 筛选
    onFilter() {
      // 如果先前已筛选，则重置
      // if (
      //   this.params.subjectType ||
      //   this.params.managementEntNameAndShortName
      // ) {
      //   this.params.subjectType = ''
      //   this.params.subjectTypeName = ''
      //   this.params.managementEntNameAndShortName = ''
      //   this.getInspectList(this.params, true)
      // } else {
      //   this.showFilter = true
      // }

      // 最新
      this.showFilter = true
    },
    toFilter() {
      this.getInspectList(this.params, true)
      this.showFilter = false
    },
    // 触底加载
    onLoad() {
      this.getInspectList(this.params)
    },
    // 选择-主体类型
    confirmSubjectType() {
      let value = this.$refs.picker1.getValues()[0]
      this.params.subjectType = value.id
      this.params.subjectTypeName = value.text
      this.showSubjectType = false
    },
    // 获取快检主体列表
    async getInspectList(params, isReset) {
      // console.log(this.params)
      if (isReset) {
        this.loading = true
        console.log('loading')
        this.finished = false
        this.list = []
        this.params.page = 1
      }
      // title belongEntName
      // 负责人 legalPerson
      // 主体类型 subjectTypeText
      // 所属市场 managementEntNameAndShortName
      // 最近快检时间 uploadTime

      const res = await getInspection(params)
      if (res.code === '0') {
        if (res.data.content.length > 0) {
          res.data.content.forEach((item) => {
            let newTime = this.clearSuffix(item.latestBillDate) || ''
            let data = [
              {
                key: '负责人',
                value: item.legalPerson
              },
              {
                key: '主体类型',
                value: item.subjectTypeText
              },
              {
                key: '最近快检时间',
                value: newTime
              }
            ]
            if (item.managementEntNameAndShortName) {
              data.splice(2, 0, {
                key: '所属市场',
                value: item.managementEntNameAndShortName
              })
            }
            this.list.push({
              title: item.name,
              id: item.id,
              subjectType: item.subjectType,
              data
            })
          })
          this.params.page++
        }
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (res.data.last) {
          this.finished = true
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.filter {
  width: 20px;
  height: 20px;
}
.popup_input {
  &_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    .cancel {
      font-size: 14px;
      color: #b2b8bd;
    }
    .title {
      font-size: 16px;
      /* 文字/常规黑(描述类文字) */
      color: #171819;
    }
    .confirm {
      font-size: 14px;
      color: #2163e0;
    }
  }
}
</style>
